<style lang="less">
	.amountpay i{ font-style: normal; color: #999; font-size: 12px; padding-left:3px;}
	.pay_title{ 
		color: #606266;padding:10px; padding-bottom: 5px;
		span{ color: #FF8855}
	}
</style>
<template>
	<div v-loading="loading">
		<div class="pay">
			<div style="width:100%;background: #FF8855;padding:20px 0;text-align: center;color:#fff;">
				收银台
			</div>
			<div style="margin-bottom:10px;font-size:14px;background: #fff;">
				<div style="display: flex;">
				<p style="width:40%;margin:0;padding:10px;text-align: left;">
					订单编号:
				</p>
				<p style="width:60%;margin:0;padding:10px;text-align: right;">
					{{data.order_sn}}
				</p>
				</div>
				<div style="display: flex;">
				<p style="width:40%;margin:0;padding:10px;text-align: left;">
					订单金额:
				</p>
				<p style="width:60%;margin:0;padding:10px;text-align: right;color:rgb(255, 136, 85)">
					￥{{data.price}}
				</p>
				</div>
			</div>

			<!--支付方式-->
			<h5 class="pay_title" v-if="shopsetting.pay.ck_pay || shopsetting.pay.czk_pay || shopsetting.pay.jffx_pay">余额支付</h5>
			<van-cell-group class="amountpay">
				<van-field
					v-if="shopsetting.pay.ck_pay"
					v-model="form.ck_amount"
					label="存款"
					input-align="right">
					<span slot="icon">元<i>(余额20元)</i></span>
				</van-field>
				<van-field
					v-if="shopsetting.pay.czk_pay"
					v-model="form.czk_amount"
					label="充值款"
					label-width="100px"
					input-align="right">
					<span slot="icon">元<i>(余额20元)</i></span>
				</van-field>
				<van-field
					v-if="shopsetting.pay.jffx_pay"
					v-model="form.jffx_amount"
					label="积分返现"
					input-align="right">
					<span slot="icon">元<i>(余额20元)</i></span>
				</van-field>
			</van-cell-group>
			<h5 class="pay_title" v-if="shopsetting.pay.wepay_open || shopsetting.pay.alipay_open">在线支付<span>(还需支付￥{{inlinepayprice}})</span></h5>
			<van-radio-group v-model="linetoppay">
				<van-cell-group>
					<van-cell
					v-if="shopsetting.pay.wepay_open"
					clickable
					title="微信支付">
						<van-radio name="1" ref="checkboxes" />
					</van-cell>
					<van-cell
					v-if="shopsetting.pay.alipay_open"
					clickable
					title="支付宝支付">
						<van-radio name="2" ref="checkboxes" />
					</van-cell>
				</van-cell-group>
			</van-radio-group>
			<h5 class="pay_title" v-if="shopsetting.pay.cash_payment_open">线下支付</h5>
			<van-radio-group v-model="linedownpay">
				<van-cell-group>
					<van-cell
					clickable
					v-if="shopsetting.pay.cash_payment_open"
					title="货到付款">
						<van-radio name="1" ref="checkboxes" />
					</van-cell>
				</van-cell-group>
			</van-radio-group>
			<div style="position: fixed;bottom:0;left:0; text-align:center; width:100%;padding:10px 0;background: #fff;">
				<van-button type="danger" style="width:90%;" @click="submit">付款(￥{{data.price}})</van-button>
			</div>
		</div>
	</div>
</template>
<script>

import { mapState } from 'vuex';
import axios from 'axios';
import {querystring} from 'vux';
import cookie from 'js-cookie';
// import {passport as passportApi} from '@/http';
let Base64 = require('js-base64').Base64;
var wx = require('weixin-js-sdk');
	export default {
		name: "pay",
		data(){
			return {
				loading : false,
				tanantId : cookie.get('tanantId'),
				data : {},
				setting : {},
				linetoppay:'1', //默认在线支付方式 微信支付
				linedownpay:'1', //默认线下支付方式 货到付款
				form : {
					pay_env :"wap",
					pay_type :"11",
					pay_version :"0",
					jsapi : 'jsbridge',
					ck_amount : 0,
					czk_amount : 0,
					jffx_amount : 0
				}
			}
		},
		computed: {
			
		},
		methods:{
			initdata(){
				this.loading = true;
				this.$http.order.get('shop/order/'+this.$route.params.id).then(res => {
					if(!res.data.code){
						this.loading = false;
						this.data = res.data.data;
					}else{
						this.loading = false;
						this.$message.error('获取订单失败,'+res.data.message)
					}
				})
			},
			//支付
			submit(){
				// alert(cookie.get('mch_openid'+this.tanantId))
				this.$http.order.post('shop/order/'+this.$route.params.id+'/pay',Object.assign(this.form,{
					mch_openid : cookie.get('mch_openid'+this.tanantId)
				})).then(res => {
					if(!res.data.code){
						if(res.data.data.paySign){
							// wx.config({
							// 	debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
							// 	appId: res.data.data.appId, // 必填，公众号的唯一标识
							// 	timestamp: obj.contime, // 必填，生成签名的时间戳
							// 	nonceStr: obj.constr, // 必填，生成签名的随机串
							// 	signature: obj.consign,// 必填，签名，见附录1
							// 	jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
							// });
							WeixinJSBridge.invoke(
								'getBrandWCPayRequest' , {
									appId : res.data.data.appId,
									timeStamp: res.data.data.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
									nonceStr: res.data.data.nonceStr, // 支付签名随机串，不长于 32 位
									package: res.data.data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
									signType: res.data.data.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
									paySign: res.data.data.paySign, // 支付签名
								},
								wechatres => {
									if(wechatres.err_msg == "get_brand_wcpay_request:ok" ){
										this.$message.success('支付订单成功!')
									}else{
										this.$message.error('支付订单失败!'+wechatres.data.message)
									}
								}
							);
							// if (typeof WeixinJSBridge == "undefined"){
							// 	if( document.addEventListener ){
							// 		document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
							// 	}else if (document.attachEvent){
							// 		document.attachEvent('WeixinJSBridgeReady', onBridgeReady); 
							// 		document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
							// 	}
							// 	}else{
							// 	onBridgeReady();
							// }
						}else{
							this.$message.success('支付订单成功!')
						}
					}
				});
			},
			
		},
		computed : {
			shopsetting(){
				return this.$store.state.shop.shopsetting;
			},
			inlinepayprice(){
				return this.data.price - this.form.ck_amount - this.form.czk_amount - this.form.jffx_amount;
			}
		},
		created(){
			if(!cookie.get('mch_openid'+this.tanantId)){
				let authPage = encodeURIComponent(window.location.href.replace('http://',''));
				if(!cookie.get('sid')){
					let str = Math.random().toString(16).substr(2,15);
					cookie.set('sid',str,7000);
				}
				// this.passportApi.defaults.baseURL
				var url = 'https://passport.api.lanaoboxiang.com/wechat/merchant_bridge?backurl='+authPage+'&sid='+cookie.get('sid')+'&tenant_id='+this.tanantId;
				window.location.href = url;
			}else{
				this.initdata();
			}
		},
	}
</script>
